<template>
  <el-dialog :title="dialogtitle" :visible.sync="visible" :show-close='false'>
    <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
      <el-form-item label="头像" >
          <el-upload class="avatar-uploader"
                     action="/api/students/uploadStuAvatar"
                     list-type="picture-card"
                     :multiple='false'
                     :on-success="uploadSuccess"
                     name="headimgurl">
                     
          
                <i class="el-icon-plus"></i>
          </el-upload>
          
      </el-form-item>


      <el-form-item label="姓名"
                    prop="name">
        <el-input v-model="stuForm.name"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="学历"
                    prop="degree">
        <el-input v-model="stuForm.degree"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="项目地址"
                    prop="productUrl">
        <el-input v-model="stuForm.productUrl"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="班级"
                    prop="class">
        <el-input v-model="stuForm.class"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="年龄"
                    prop="age">
        <el-input v-model="stuForm.age"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="城市"
                    prop="city">
        <el-input v-model="stuForm.city"
                  auto-complete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="描述"
                    prop="description">
        <el-input v-model="stuForm.description"
                  auto-complete="off">
        </el-input>
      </el-form-item>
    </el-form>


    <div slot="footer">
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="onConfirm('stuDialogRuleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as stuApi from '@/api/student'
export default {
  props:{
      visible:{
          type:Boolean,
          default(){
              return false
          }
      }
  },
  data() {
    return {
    //    检验规则
       stuRules:{
           name:[
               {required:true,message:'请输入名字',trigger:'blur'}
           ],
           class:[
               {required:true,message:'请输入班级',trigger:'blur'}
           ],
           degree:[
               {required:true,message:'请输入学历',trigger:'blur'}
           ],
           city:[
               {required:true,message:'请输入城市',trigger:'blur'}
           ],
           productUrl:[
               {required:true,message:'请输入项目地址',trigger:'blur'}
           ],
           age:[
               {required:true,message:'请输入年龄',trigger:'blur'}
           ],
           description:[
               {required:true,message:'请输入描述',trigger:'blur'}
           ],
         
       },


        // dialog的标题
        dialogtitle:'添加学生信息',
        
       // 学生信息，用于表单
       stuForm:{
           name:'',
           productUrl:'',
           headimgurl:'',
           class:'',
           age:'',
           city:'',
           degree:'',
           description:''
       }
    };
  },

  methods:{
      // 上传图片成功的回调
      uploadSuccess(r){
          console.log(r);
        //  给stuForm中的headimgurl赋值
        if(r.state){
            this.stuForm.headimgurl = r.headimgurl
            console.log(this.stuForm);
        }else {
            this.$message.error(r.msg + '' + r.err)
        }
      },
       // 点击确定按钮
       onConfirm(formName){
           // 表单本地校验
           this.$refs[formName].validate(valid => {
               // 本地表单检验通过
               // 发送请求，将数据传递到服务器
               // 关闭dialog
                if(valid){
                    // 通过本地校验后，触发父组件的ok函数，并将学生数据存到服务器
                    this.$emit('ok',this.stuForm)
                   
                }   
           })
       }
  }
};
</script>



<style scoped lang='less'>
    
element.style {
    margin-top: 15vh;
}
.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 50%;
}
.el-dialog__header {
    padding: 0!important;
    line-height: 60px;
}
.el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
}
.avatar-uploader {
    text-align: left;
}
.el-form-item__content{
    display: table;
    content: "";
}
.el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
</style>
